<template>
  <div style="background: #fff;">
    <el-row>
      <el-col :span="24">
        <div class="alert alert-primary" title="教师课件" role="alert" >题库
           <router-link style="float: right;color: #fff;width: 64px;height: 39px;line-height: 39px;border-radius: 5px;font-size: 13px;text-align: center;background: #409EFF;margin-left: 10px;"
                  :to="{ name:'itembank'}"
                >返回</router-link>
          <el-button type="primary"  @click="downimg" style="float: right;">生成答题连接</el-button>
          <el-button type="primary"  @click="dialogVisible = true" style="float: right;margin-right: 10px;">选取答题</el-button>
          </div>
          <p style="padding: .75rem 1.25rem;"> 标题：{{$route.query.name}} <span style="float: right;">已选择：{{this.thisTeacheritembankitembank.length}}题</span></p>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="18">
        
        <el-dialog
          title="选择"
          :visible.sync="dialogVisible"
          width="80%"
          :close-on-press-escape="false"
        >
          <div class="container-fluid">
            <div class="row" style="height: 500px;overflow: auto;">
              <div
                v-for="(v,i) in getItembankgroup"
                :key="`1teacheritembankitembank${i}`"
                class="teacher"
              >
                <div class="named" v-text="v.name"></div>
                <div
                  class="row"
                  v-for="(vo, io) in getItembankitembankgroup.filter(n => n.itembankgroupid === v.ID)"
                  :key="`2teacheritembankitembank${io}`"
                  style="display: flex;line-height: 50px;border-bottom: 1px solid #7777772b;overflow: auto;margin-left: 4px;"
                  :class="sstt(io%2==0)"
                >
                  <el-checkbox
                    :label="getItembank.find(n=> n.ID==vo.itembankid).ID"
                    v-model="checked"
                    style="margin-bottom: 0px;"
                  ></el-checkbox>
                  <span style="flex:1;" v-text="getItembank.find(n=> n.ID==vo.itembankid).title"></span>
                   <span style="flex:1;padding: 5px;" >
          <img
                v-if="getItembank.find(n=> n.ID==vo.itembankid).other && getItembank.find(n=> n.ID==vo.itembankid).other.image"
                class="img-responsive"
                :src="getItembank.find(n=> n.ID==vo.itembankid).other.image"
                alt
              >
            </span>
                  <span style="flex:1;text-align: center;" v-text="getItembank.find(n=> n.ID==vo.itembankid).type"></span>
                   <p  v-if="thisItembank(vo).type=='应用'" style="flex:1;">{{thisItembank(vo).other}}</p>
          <p v-else style="flex:1;margin-bottom: 0px;display:flex;">选项：{{thisItembank(vo).other.option}}
             <!-- <div v-for="(vo, i) in thisItembank(vo).other.option" :key="`1answer${i}`" style="flex:1;">
                    <span >{{addd(i)}}:  {{vo}}</span>
                  </div> -->
            </p>
                </div>
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
          </span>
        </el-dialog>
        <hr>
        <div
          class="form-check"
          v-for="(v, i ) in pageTableData"
          :key="`3teacheritembankitembank${i}`"
          style="display: flex;margin-top: 14px;border-bottom: 1px solid #7777772b;margin-left: 19px;"
        >
          <input
            class="form-check-input"
            type="radio"
            name="exampleRadios"
            v-model="radio"
            :value="thisItembank(v).ID"
          >
          <label class="form-check-label" style="flex:1;">{{i+1}} {{thisItembank(v).title}}   </label>
          <p style="flex:0.4;">类型：{{thisItembank(v).type}}</p>
          <p v-if="thisItembank(v).type=='应用'" style="flex:1;">{{thisItembank(v).other}}</p>
          <p v-else style="flex:1;margin-bottom: 0px;display:flex;">选项：
             {{thisItembank(v).other.option}}
            </p>
          <p style="flex:1;">正确答案：{{thisItembank(v).answer}}</p>
        </div>
          <el-pagination
  small
  v-show="this.thisTeacheritembankitembank.length>15"
  @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[15]"
        :page-size="15"
  layout="total, sizes, prev, pager, next, jumper"
  :total="this.thisTeacheritembankitembank.length">
</el-pagination>
      </el-col>
      <el-col :span="6">
        <div class="mnq">
          <el-container class="bgtu">
            <el-header :height="height">
              <h2 v-show="index===-1" class="text-center text-white">{{$route.query.name}}</h2>
            </el-header>
            <el-main class="main">
              <div class="bg-white cone rounded">
                <div v-show="index===-1">
                  <h4>请认真填写以下信息以确保结果的准确性。</h4>
                  <form>
                    <div class="form-group">
                      <label>姓名</label>
                      <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                      <label>年龄</label>
                      <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                      <label>电话</label>
                      <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                      <button type="button" class="btn btn-primary btn-block" @click="index=0">开始测试</button>
                    </div>
                  </form>
                </div>
                <div v-show="index==0">
                  <div
                    v-for="(v, i) in thisTeacheritembankitembank"
                    :key="`4teacheritembankitembank${i}`"
                    v-show="v.itembankid == radio"
                  >
                    <div class="itembankclass text-white">
                      <span class="text-18">{{i+1}}</span>
                      <span>/</span>
                      <span>{{thisTeacheritembankitembank.length}}</span>
                    </div>
                    <h4>
                      {{i+1}}. {{ thisItembank(v).title }}
                      <span
                        class="text-danger"
                      >（{{thisItembank(v).type}}）</span>
                    </h4>
                    <img
                      v-if="thisItembank(v).other && thisItembank(v).other.image"
                      class="img-responsive"
                      :src="thisItembank(v).other.image"
                      alt
                    >
                    <div v-if="thisItembank(v).type=='单选'">
                      <div
                        class="form-group"
                        v-for="(vp, ia) in thisItembank(v).other.option"
                        :Key="`5teacheritembankitembank${ia}${i}`"
                      >
                        <el-button
                          style="white-space: normal;word-wrap: break-word;"
                          :type="primary(vp,thisItembank(v))"
                          @click="checked[i].push(vp)"
                          class="btn-block"
                          round
                          v-text="vp"
                        ></el-button>
                      </div>
                    </div>
                    <div v-else-if="thisItembank(v).type=='多选'">
                      <div
                        class="form-group"
                        v-for="(vp, ia) in thisItembank(v).other.option"
                        :Key="`6teacheritembankitembank${ia}${i}`"
                      >
                        <el-button
                          style="white-space: normal;word-wrap: break-word;"
                          class="btn-block"
                          :type="primary(vp,thisItembank(v))"
                          round
                          v-text="vp"
                        ></el-button>
                      </div>
                    </div>
                    <div v-else>
                      <div class="form-group">
                        <el-input :value="thisItembank(v).answer" placeholder="请输入内容"></el-input>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="pull-left">
                        <el-button
                          type="info"
                          round
                          icon="el-icon-arrow-left"
                          @click="left(i-1)"
                        >上一题</el-button>
                      </div>
                      <div class="pull-right">
                        <el-button type="info" @click="left(i+1)" round>
                          {{i+1 == thisTeacheritembankitembank.length?'提交答案':'下一题'}}
                          <i
                            class="el-icon-arrow-right el-icon--right"
                          ></i>
                        </el-button>
                      </div>
                      <div class="clearfix"></div>
                    </div>
                  </div>
                </div>
              </div>
            </el-main>
          </el-container>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import _ from "underscore";
import { asynccreateteacheritembankitembank, } from "../../../plugins/api.js";
import QRCode from "qrcode";
export default {
  name: "teacheritembankitembank",
  computed: {
    ...mapGetters([
      "getItembankgroup",
      "getItembank",
      "getItembankitembankgroup",
      "getTeacheritembankitembank"
    ]),

    thisTeacheritembankitembank() {
      return this.getTeacheritembankitembank.filter(
        v => v.teacheritembankid == this.ID
      );
    },
     pageTableData() {
      let pages = Math.ceil(this.thisTeacheritembankitembank.length / 15); //12为每页设置数量
      let newList = [];
      for (let i = 0; i < pages; i++) {
        let sonList = [];
        sonList = this.thisTeacheritembankitembank.slice(i * 15, i * 15 + 15); //12为每页设置数量
        newList.push(sonList);
      }
      return newList[this.currentPage - 1];
    },
  },
  data() {
    return {
      radio: "",
      checked: [],
      dialogVisible: false,
      currentPage: 1,
      pagesize: 20,
      index: -1,
      height: "80px",
      answers: [],
      allremarks:[],
      // sstt:[
      //       "ss1",
      //       "ss2",
      //     ],
    };
  },
  props: ["ID"],
  watch: {
     currentPage(v) {
      console.log(v);
    },
    pagesize(v) {
      console.log(v);
    },
    radio(v) {
      console.log(v);
    },
    index(v) {
      if (v === -1) {
        this.height = "80px";
      } else {
        this.height = "32px";
      }
    },
    checked(v) {
      this.answers = v.map(() => "");
    }
  },
  async mounted() {
    this.checked = this.getTeacheritembankitembank
      .filter(v => v.teacheritembankid == this.ID)
      .map(v => v.itembankid);
      // await this.start();
  },

  methods: {
     addd(i){
      switch (Number(i)) {
        case 0:
          return "A";
        case 1:
          return "B";
        case 2:
          return "C";
        case 3:
          return "D";
      }
    },
    sstt(a){
      if(a!=true){
        return "ss1"
      }
    },
     handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    thisItembank(v) {
      const data = this.getItembank.find(vo => vo.ID == v.itembankid);
      return data;
    },
    async add() {
      try {
        let data = this.getTeacheritembankitembank
          .filter(v => v.teacheritembankid == this.ID)
          .map(v => v.itembankid);
        let d = _.difference(data, this.checked);
        let a = _.difference(this.checked, data);
        let x = _.union(d, a);
        for (let v of x) {
          await asynccreateteacheritembankitembank({
            itembankid: v,
            teacheritembankid: this.ID
          });
        }
        this.dialogVisible = false;
      } catch (err) {
        this.$alert(err);
        this.loading = false;
      }
      this.$store.dispatch("actionTeacherbyiditembank");
    },
    primary(vp, data) {
      if (data.type == "单选") {
        if (vp == data.answer) {
          return "primary";
        }
      } else if (data.type == "多选") {
        if (data.answer.split(",").indexOf(vp) != -1) {
          return "primary";
        }
      }
    },
    left(i) {
      switch (i) {
        case this.thisTeacheritembankitembank.length:
          this.submit();
          break;
        case -1:
          this.index = -1;
          break;
        default:
          this.radio = this.thisTeacheritembankitembank[i].itembankid;
      }
    },
    async submit() {
      this.$alert("提交成功");
    },
    downimg() {
      if (!this.thisTeacheritembankitembank.length) {
        this.$alert("先选择一些题吧");
        return;
      }
      const redirect_uri = encodeURIComponent(location.origin + "/wechat/answer");
      const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc38a242cea953176&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=${
        this.ID
      }#wechat_redirect`;
      const dom = document.createElement("canvas");
      QRCode.toCanvas(
        dom,
        url,
        {
          width: 400,
          height: 400,
          colorDark: "#000000",
          colorLight: "#ffffff"
        },
        error => {
          if (error) console.error(error);
          let a = dom.toDataURL("image/png");
          const img = document.createElement("a");
          img.href = a;
          img.download = `${this.$route.query.name}.png`;
          img.click();
        }
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.a1 {
  padding-left: 35px;
}
.mnq {
  height: 667px;
  // width: 375px;
}
.bgtu {
  background-image: url(https://cdn.hterobot.com/vue/teacher/image/%E7%AD%94%E9%A2%98%E8%83%8C%E6%99%AF%E5%9B%BE.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  height: 100%;
}

.cone {
  margin: 0 auto;
  padding-top: 20px;
  padding-right: 33px;
  padding-left: 33px;
  padding-bottom: 45px;
  background-image: url("https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/vue/teacher/image/icon.ico");
  background-repeat: no-repeat;
  background-position-x: left;
  background-position-y: bottom;
  background-size: 25%;
}

.teacher {
      width: -webkit-fill-available;
  padding: 15px;
  float: left;
}

.main {
  padding-left: 28px;
  padding-right: 28px;
  padding-top: 22px;
  padding-bottom: 22px;
}

h2 {
  height: 80px;
  line-height: 80px;
}
h4 {
  font-size: 19px;
}

.form-group {
  margin-top: 25px;
  margin-bottom: 25px;
}
.itembankclass {
  text-align: center;
  margin: 0 auto;
  margin-top: -40px;
  display: block;
  background-image: url(https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/vue/teacher/image/itembankclass.png);
  height: 80px;
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 55px;
  line-height: 60px;
}
.text-18 {
  font-size: 18px;
}
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}
.alert-primary{
  border-color: #fff;
  background-color:#fff;
}
.named{
  width: 200px;
	height: 26px;
  text-align: center;
	font-family: MicrosoftYaHei-Bold;
	font-size: 18px;
	font-weight: 600;
	font-stretch: normal;
	letter-spacing: 1px;
	color: #ffffff;
  background: #2F81F1;
  border-radius: 5px;
}
.ss1{
    background: #E5F4FF;
  }
  .ss2{
    background: #fff;
  }
</style>

